<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>设备管理-设备信息</title>

    <link href="../plugin/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-table-1.11.1/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../plugin/sweetalert-6.6.2/sweetalert2.min.css" rel="stylesheet"/>
    <link href="../plugin/jstree/jstree.min.css" rel="stylesheet">
    <link href="../plugin/bootstrap-fileinput-master/fileinput.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../plugin/fileupload/css/jquery.fileupload.css">
    <link href="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>

    <script src="../plugin/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../plugin/bootstrap-table-1.11.1/bootstrap-table.js"></script>
    <script src="../plugin/bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../plugin/sweetalert-6.6.2/sweetalert2.min.js"></script>
    <script src="../plugin/jquery-3.2.1/jquery.formautofill.min.js"></script>
    <script src="../plugin/soul/utils3.js"></script>
    <script src='../js/base.js'></script>
    <!--<script src="../plugin/soulUtils/soul_utils.js"></script>-->
    <script src='../plugin/jquery-3.2.1/jquery.form.js'></script>
    <script src="../plugin/jquery-3.2.1/jquery.serializejson.js"></script>
    <script src="../plugin/jstree/jstree.min.js"></script>
    <script src="../plugin/bootstrap-fileinput-master/fileinput.min.js"></script>
    <script src="../plugin/bootstrap-select/bootstrap-select.js"></script>
    <script src="../plugin/bootstrap-select/defaults-zh_CN.js"></script>
    <script src="../plugin/jquery-zoomify/zoomify.min.js"></script>

</head>

<body>

<!-- 设备信息导入模态框 -->
<div class="modal fade in" data-backdrop="static" id="equipment_modal_edit_info">
    <form id="ajaxForm" enctype="multipart/form-data" onsubmit="return false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <b>设备信息</b>
                    </h4>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="form-group"><label class="col-sm-2 control-label">医院名称</label>
                            <div class="col-sm-9">
                                <select class="form-control" id="hospitalId" name="hospitalId"
                                        class="form-control"></select>
                                &nbsp;&nbsp;
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">导入文件:</label>
                            <div class="col-sm-9">
                                <input type="file" id="file" name="file" class="form-control" placeholder="请输入文本"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" onclick="doUpload()">确认</button>
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- 服务范围批量修改模态框 -->
<div class="modal fade in" data-backdrop="static" id="equipmentServe_modal_edit_info">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">
                    <b>设备服务范围</b>
                </h4>
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="form-group"><label class="col-sm-2 control-label">服务范围</label>
                        <div class="col-md-9">
                            <select id='fuwufanwei' class="selectpicker" multiple data-live-search="true">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="sure()">确认</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var currentEquipmentIds;
        var currentServerIds;
        var resp = AjaxUtil.isLogin();
        if (!resp) return;
        var resp = AjaxUtil.getJson('equipmentServe/selectItem');
        var commodityServeIdList = resp.obj;
        var module = 'equipment';
        var query = [{
            id: 'hospital',
            type: 'select',
            name: '医院名称',
            paramName: 'hospitalId',
            items: 'hospital/selectItem'
        }, {
            id: 'departmentName',
            type: 'text',
            name: '科室',
            paramName: 'departmentName',
            palceholder: ''
        }, {
            id: 'equipmentBrandName',
            type: 'text',
            name: '品牌',
            paramName: 'equipmentBrandName',
            palceholder: ''
        }, {
            id: 'equipmentModel',
            type: 'text',
            name: '规格型号',
            paramName: 'equipmentModel',
            palceholder: ''
        }, {
            id: 'name',
            type: 'text',
            name: '设备名称',
            paramName: 'name',
            palceholder: ''
        }, {
            id: 'equipmentSerial',
            type: 'text',
            name: '设备序列号',
            paramName: 'equipmentSerial',
            palceholder: ''
        }, {
            id: 'equipmentCode',
            type: 'text',
            name: '设备二维码',
            paramName: 'equipmentCode',
            palceholder: ''
        }];
        var toolbar = {
            default: [false, true, true, true],// back;add;edit;remove
            dialog: [60, 2, 9],//对话框参数:模态框宽度(百分比);表单标题宽度;表单输入框宽度
            extra: [{
                name: '导入',
                type: 'file',
                glyphicon: 'import',
                onclick: 'import',
            }, {
                name: '导出',
                glyphicon: 'export',
                onclick: 'export',
            }, {
                name: '批量添加服务范围',
                glyphicon: 'list',
                onclick: 'addEquipmentServe',
            }]
        };
        // 表单内容配置
        var formElement = [{
            action: [false, true],
            type: 'hidden', // 表单类型
            name: 'equipmentId', // 字段名称
        }, {
            action: [true, true],
            id: 'hospitalId',
            type: 'select',
            label: '所属医院',
            name: 'hospitalId',
            items: "hospital/selectItem"
        }, {
            action: [true, true],
            type: 'text',
            label: '设备名称',
            name: 'name',
        }, {
            action: [true, true],
            type: 'text',
            label: '品牌',
            name: 'equipmentBrandName',
        }, {
            action: [true, true],
            type: 'text',
            label: '规格型号',
            name: 'equipmentModel',
        }, {
            action: [true, true],
            type: 'text',
            label: '序列号',
            name: 'equipmentSerial',
        }, {
            action: [true, true],
            type: 'text',
            label: '二维码',
            name: 'equipmentCode',
        }, {
            action: [true, true],
            type: 'text',
            label: '运行状态',
            name: 'runStatus',
        }, {
            action: [true, true],
            type: 'images',
            label: '设备图片',
            name: 'photo',
            module: 'equipment',
            maxCount: 10
        }, {
            action: [true, true],
            type: 'datetime',
            label: '启用验收日期',
            name: 'enableDate',
        }];

        var bootstrapTable = {
            url: '',
            columns: [{
                checkbox: true
            }, {
                field: 'icon',
                title: '服务范围图标',
                formatter: function (value, row, index) {
                    if (value) {
                        var path;
                        var html = "";
                        var photoStr = value.split('-');// 多图切割
                        for (var i = 0; i <= photoStr.length - 1; i++) {
                            path = '/resource/images/equipmentServe/' + photoStr[i];
                            html += '<a href="' + path + '" target="_blank"><img height="50px" src="' + path + '" style="padding: 5px"></a>';
                        }
                        return html;
                    } else {
                        return '暂无图片'
                    }

                }
            }, {
                field: 'equipmentServeName',
                title: '服务范围名称',
            }, {
                field: 'hospitalName',
                title: '医院名称',
            }, {
                field: 'name',
                title: '设备名称',
            }, {
                field: 'equipmentBrandName',
                title: '品牌',
            }, {
                field: 'equipmentModel',
                title: '规格型号',
            }, {
                field: 'equipmentSerial',
                title: '设备序列号',
            }, {
                field: 'equipmentCode',
                title: '设备二维码',
            }, {
                field: 'runStatus',
                title: '运行状态',
            }, {
                field: 'departmentName',
                title: '科室',
            }, {
                field: 'photo',
                title: '设备图片',
                formatter: function (value, row, index) {
                    if(value==null){
                        return '暂无图片'
                    }
                    if (value.match("-")) {
                        var path='/resource/images/equipment/';
                        var html = "";
                        var photoStr1="";
                        var photoStr = value.split('-');// 多图切割
                        for (var i = 0; i <=photoStr.length - 1; i++) {
                            photoStr1 = photoStr[i];
                            html += '<a href="' + path + photoStr1+'" target="_blank"><img height="50px" src="' + path +photoStr1 +'" style="padding: 5px"></a>';
                        }
                        return html;
                    } else {
                        if (value) {
                            return BootstrapTableUtil.formatter.image(value, 'equipment', '60');
                        } else {
                            return '暂无图片'
                        }
                    }


                }
            }, {
                field: 'enableDate',
                title: '启用验收日期',
                formatter: BootstrapTableUtil.formatter.datetime
            }]
        };

        equipment = SingleTablePageCreateUtil.createInstance(module, query, toolbar, formElement, bootstrapTable);

        equipment.onAddModalShowBefore = function () {
            $('#equipment_modal_add input[name="name"]').val("");
            $('#equipment_modal_add input[name="equipmentBrandName"]').val("");
            $('#equipment_modal_add input[name="equipmentModel"]').val("");
            $('#equipment_modal_add input[name="unit"]').val("");
            $('#equipment_modal_add input[name="unitPrice"]').val("");
            $('#equipment_modal_add input[name="amount"]').val("");
            $('#equipment_modal_add input[name="enableDate"]').val("");
            $('#equipment_modal_add input[name="departmentName"]').val("");
            $('#equipment_modal_add input[name="supplier"]').val("");
            $('#equipment_modal_add input[name="runStatus"]').val("");
            $('#equipment_modal_add input[name="staffName"]').val("");
            $('#equipment_modal_add input[name="useDirection"]').val("");
            $('#equipment_modal_add input[name="financialCoding"]').val("");
            $('#equipment_modal_add input[name="remarks"]').val("");
            $('#equipment_modal_add input[name="producerOrigin"]').val("");
            $('#equipment_modal_add input[name="storagePlace"]').val("");
            $('#equipment_modal_add input[name="depreciationLife"]').val("");
            $('#equipment_modal_add input[name="equipmentSerial"]').val("");
            $('#equipment_modal_add input[name="serviceYear"]').val("");
            return true;
        };

        equipment.onEditModalShowBefore = function (row) {
            row.enableDate = FormatUtil.formatDateTime(row.enableDate);
            FileinputUtil.initPreview("#equipment_form_edit_undefined", "equipment", row.photo);
            return row;
        };

        equipment.onRemoveSubmitBefore = function (row) {
            row.enableDate = FormatUtil.formatDateTime(row.enableDate);
            FileinputUtil.initPreview("#equipment_form_edit_undefined", "equipment", row.photo);
            return row;
        };

        //点击导入显示模态框
        equipment.import = function () {
            $('#hospitalId').empty();
            var resp = AjaxUtil.getJson('hospital/selectItem').obj;
            var s = '<option value>' + '请点击下拉框选择' + '</option>';
            for (var i = 0; i < resp.length; i++) {
                s += '<option value="' + resp[i].value + '">' + resp[i].name + '</option>';
            }
            $('#hospitalId').append(s);
            $('#equipment_modal_edit_info').modal('show');
        };
        //点击导出
        equipment.export = function () {
            var par = $('#equipment_form').serializeJSON();
            var url = '';
            for (var key in par) {
                url += '&' + key + '=' + par[key];
            }
            url = BaseConfig.preUrl + 'equipment/downloadExcel?token=' + BaseConfig.token + url;
            window.open(url);
        };

        //点击确认按钮提交表单内容
        doUpload = function () {
            var formData = new FormData($("#ajaxForm")[0]);
            $.ajax({
                url: '/equipment/excelImport?token=' + BaseConfig.token,
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                success: function (res) {
                    if (res.code == 412) {
                        SwalUtil.error(res.msg);
                    }
                    if (res.code == 200) {
                        $('#equipment_modal_edit_info').modal('hide');
                        SwalUtil.success(res.msg);
                        $('#equipment_table').bootstrapTable('refresh');
                    }
                },
            });
            return false;
        }


        //点击批量修改显示服务范围模态框
        equipment.addEquipmentServe = function () {
            var rows = $('#equipment_table').bootstrapTable('getSelections');
            var ids = '';
            for (var i = 0; i < rows.length; i++) {
                if (i == rows.length - 1) {
                    ids += rows[i].equipmentId;
                    break;
                }
                ids += rows[i].equipmentId + ",";
            }
            currentEquipmentIds = ids;

            $('#fuwufanwei').empty();
            var resp = AjaxUtil.getJson('equipmentServe/selectItem').obj;
            var s = '';
            for (var i = 0; i < resp.length; i++) {
                s += '<option value="' + resp[i].value + '">' + resp[i].name + '</option>';
            }
            $('#fuwufanwei').append(s);
            $('#fuwufanwei').selectpicker('refresh');
            var $selects = $(".show-tick");
            $selects.eq(0).css("width", "335px");
            $('#equipmentServe_modal_edit_info').modal('show');
        };

        // $('#fuwufanwei').change(function () {
        //     currentServerIds=$(this).val();
        // });
        //点击确认按钮提交表单内容
        sure = function () {
            var serverIds = $('#fuwufanwei').val();
            var equipmentServeId = "";
            for (i = 0; i < serverIds.length; i++) {
                if (i == serverIds.length - 1) {
                    equipmentServeId += serverIds[i];
                    break;
                }
                equipmentServeId += serverIds[i] + ",";
            }
            var resp = AjaxUtil.postJson('equipment/batchEdit', {
                currentEquipmentIds: currentEquipmentIds,
                equipmentServeId: equipmentServeId,
            });
            if (resp) {
                SwalUtil.success(resp.msg);
                $('#equipment_table').bootstrapTable('refresh');
                $('#equipmentServe_modal_edit_info').modal('hide');
                currentEquipmentIds = "";
            }
        }


        // 初始化开始时间和结束时间
        $('#begin_enableDate').val(DateUtil.thirtyDayBeforeDate());
        $('#end_enableDate').val(DateUtil.nowDate());
        $('#begin_enableDate').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            minView: 2,
            autoclose: true,
        });
        $('#end_enableDate').datetimepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            minView: 2,
            autoclose: true,
        });

    });
    var DateUtil = {
        nowDate: function () {
            return FormatUtil.formatDate(new Date().getTime());
        },
        thirtyDayBeforeDate: function () {
            var now = new Date().getTime();
            now -= 1000 * 60 * 60 * 24 * 365 * 10;
            return FormatUtil.formatDate(now);
        }
    };

</script>


</body>

</html>